import React from 'react'
import _ from 'underscore'
import Card from 'lib/components/card.jsx'
import Chart from 'lib/components/chart.jsx'
import format from 'lib/util/format'

import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts)

const BROWSER_PERF_KEYS = [
  'connectEnd','connectStart',
  'domComplete','domContentLoadedEventEnd','domContentLoadedEventStart','domInteractive','domLoading',
  'domainLookupEnd','domainLookupStart','fetchStart','loadEventEnd','loadEventStart','navigationStart',
  'redirectEnd','redirectStart','requestStart','responseEnd','responseStart','secureConnectionStart',
  'unloadEventEnd','unloadEventStart'
]
var keys = ['Unload', 'Redirect', 'Cache', 'DNS', 'TCP', 'Request', 'Response', 'DOM', 'Page'];
function parseSeries(viewDetail,trace){
  var timing = _.object(BROWSER_PERF_KEYS,viewDetail.slice(1,viewDetail.length - 1))
    , timestamp = timing.navigationStart
  var series = [{
    name: '耗时',
    color:'#99dddd',
    type: 'columnrange',
    data:[
      [
        timing.unloadEventStart === 0 ? 0 :timing.unloadEventStart - timestamp,
        timing.unloadEventEnd === 0 ? 0 :timing.unloadEventEnd - timestamp
      ],
      [
        timing.redirectStart === 0 ? 0 :timing.redirectStart - timestamp,
        timing.redirectEnd === 0 ? 0 :timing.redirectEnd - timestamp
      ],
      [
        timing.fetchStart === 0 ? 0 :timing.fetchStart - timestamp,
        timing.domainLookupStart === 0 ? 0 :timing.domainLookupStart - timestamp
      ],
      [
        timing.domainLookupStart === 0 ? 0 :timing.domainLookupStart - timestamp,
        timing.domainLookupEnd === 0 ? 0 :timing.domainLookupEnd - timestamp
      ],
      [
        timing.connectStart === 0 ? 0 :timing.connectStart - timestamp,
        timing.connectEnd === 0 ? 0 :timing.connectEnd - timestamp
      ],
      [
        timing.requestStart === 0 ? 0 :timing.requestStart - timestamp,
        timing.responseStart === 0 ? 0 :timing.responseStart - timestamp
      ],
      [
        timing.responseStart === 0 ? 0 :timing.responseStart - timestamp,
        timing.responseEnd === 0 ? 0 :timing.responseEnd - timestamp
      ],
      [
        timing.domLoading === 0 ? 0 :timing.domLoading - timestamp,
        timing.domComplete === 0 ? 0 :timing.domComplete - timestamp
      ],
      [
        timing.domComplete === 0 ? 0 :timing.domComplete - timestamp,
        timing.loadEventEnd === 0 ? 0 :timing.loadEventEnd - timestamp
      ]
    ]
  }]
  return series
}
var xAxis = {
  categories: keys,
  type:'category',
  gridLineDashStyle: 'longdash',
  gridLineColor: '#E7E7E7',
  gridLineWidth: 1,
  labels: {
    align: 'right',
    style: {
      color: '#999999'
    }
  },
  minRange:1,
  minTickInterval:0,
  tickPosition: 'inside'
}
var yAxis = {
  gridLineDashStyle: 'solid',
  gridLineColor: '#E0E0E0',
  gridLineWidth: 1,
  labels:{
    format:'{value} ms'
  },
  title: {
    text: null
  }
}
var chartOption = {
  spacing: [5, 20, 2, 2],
  type: 'columnrange',
  inverted: true
}
var chartSettings = {
  tooltip:{
    useHTML: true
  },
  legend:{
    enabled:false
  },
  plotOptions:{
    columnrange: {
      dataLabels: {
        enabled: true,
        overflow: 'none',
        inside: false,
        crop: false,
        useHTML: true
      }
    },
    series:{
      pointInterval:1
    }
  }
}

export default class WebViewDetail extends React.Component{
  render(){
    var trace = this.props.trace
    return (
      <div className="widget-content">
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card>
                <div className="pure-g">
                  <div className="pure-u-1 pure-u-lg-1-3">
                    开始时间：
                    {format.stampToTime(trace.timestamp)}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    耗时：
                    {format.integer(trace.executeTime)+' ms'}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    白屏时间：
                    {format.integer(trace.breakDown)+' ms'}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    操作系统：
                    {trace.osName+' '+trace.osVersionName}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    当前电量：
                    {trace.baseDetail[4]}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    内存情况：
                    {trace.baseDetail[8]}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    地域：
                    {trace.baseDetail[1]}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    联网方式：
                    {trace.baseDetail[6].toLowerCase() === 'wifi' ? trace.baseDetail[6] : trace.networkModel}
                  </div>
                  <div className="pure-u-1">
                    Uri：
                    <p style={{wordBreak: 'break-all'}}>{trace.webViewDetail[0]}</p>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card>
                <Chart
                  chart={chartOption}
                  series={parseSeries(trace.webViewDetail,trace)}
                  chartSettings={chartSettings}
                  xAxis={xAxis}
                  yAxis={yAxis}
                />
              </Card>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
